<template>
	<view>
		<view class="home">
			<swiper indicator-dots circular>
				<swiper-item v-for="item in swipers" :key="item.id">
					<image :src="item.img"></image>
				</swiper-item>
			</swiper>
			<view class="nav">
				<view class="nav_item" v-for="(item, index) in navs" :key="index" @click="navItemClick(item.path)">
					<view :class="item.icon"></view>
					<text>{{ item.title }}</text>
				</view>
			</view>
			<view class="hot_goods">
				<view class="tit">//</view>
				<goods-list @goodsItemClick="goGoodsDeatil" :goods="goods"></goods-list>
			</view>
		</view>
	</view>
	
</template>

<script>
	import goodsList from '../../components/goods0list/goods-list.vue'
	export default {
		data() {
			return {
				title: '我来自中国',
				navs:[
					{
						icon:'iconfont icon-ziyuan',
						title:'1',
						path:'/pages/goods/goods'
					},
					{
						icon:'iconfont icon-ziyuan',
						title:'2',
						path:'/pages/gs/gs'
					},
					{
						icon:'iconfont icon-ziyuan',
						title:'3',
						path:'/pages/ds/ds'
					},
					{
						icon:'iconfont icon-ziyuan',
						title:'4',
						path:'/pages/gds/gds'
					}
				]
			}
		},
		onLoad() {
			uni.showLoading({
				title:'.......'
			})
			uni.request({
				url:'https://unidemo.cloud.net.cn/api/news',
				method:'GET',
				data:{},
				success: res => {
					this.news = res.data;
					uni.hideLoading();
				},
				fail:()=>{},
				complete:()=>{}
			})
		},
		methods: {
			openinfo(e){
				console.log(e);
				var newsid = e.currentTarget.dataset.newsid;
				uni.navigateTo({
					url:'../detail/detail?newsid' + newsid
				});
			},
			goGoodsDetail(id){
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	// @import url("./a.css");
	.home{
		box1{
			width: 375rpx;
			height: 375rpx;
			// background: $global-color;
			background: red;
			font-size: 30rpx;
			color: #fff;
			text{
				color: pink;
			}
			image{
				height: 100%;
				width: 100%;
			}
		}
	 .nav {
		display: flex;
		.nav_item {
			width: 25%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background: brown;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}
			.icon-tupian{
				font-size: 45rpx;
			}
			text{
				font-size: 30rpx;
				color: blue;
			}
		}
	 }
	}
</style>

